<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>详细信息</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
      padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
    <fieldset class="layui-elem-field">
        <legend>档案信息</legend>
        <div class="layui-field-box">
          <form class="layui-form layui-form-pane" action="">
            <span style="color: #009688">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息</span>
            <hr class="layui-border-green">
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="staffName" lay-verify="required|username" lay-verType="tips"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>性别</label>
              <div class="layui-input-inline">
                <select id="sex" name="sex" lay-filter="sex" required>
                  <option value="男" selected>男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>出生日期</label>
              <div class="layui-input-inline">
                <input type="text" id="birthday" name="birthday" placeholder="yyyy-mm-dd" lay-verify="required|date" lay-verType="tips"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>身份证号码</label>
              <div class="layui-input-inline">
                <input type="text" name="idNumber" lay-verify="required|identity" lay-verType="tips"
                       autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>政治面貌</label>
              <div class="layui-input-inline">
                <select name="politicsStatus" lay-verify="required">
                  <option selected disabled>请选择</option>
                  <option value="团员">团员</option>
                  <option value="中共党员">中共党员</option>
                  <option value="群众">群众</option>
                  <option value="其他">其他</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>婚姻状态</label>
              <div class="layui-input-inline">
                <select lay-verify="required" name="marriage">
                  <option selected value="未婚">未婚</option>
                  <option value="已婚">已婚</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>籍贯</label>
              <div class="layui-input-inline">
                <select lay-verify="required" name="nativePlace">
                  <option selected disabled>请选择</option>
                  <option value="北京市">北京市</option>
                  <option value="天津市">天津市</option>
                  <option value="河北省">河北省</option>
                  <option value="山西省">山西省</option>
                  <option value="内蒙古">内蒙古</option>
                  <option value="辽宁省">辽宁省</option>
                  <option value="吉林省">吉林省</option>
                  <option value="黑龙江">黑龙江</option>
                  <option value="上海市">上海市</option>
                  <option value="江苏省">江苏省</option>
                  <option value="浙江省">浙江省</option>
                  <option value="安徽省">安徽省</option>
                  <option value="福建省">福建省</option>
                  <option value="江西省">江西省</option>
                  <option value="山东省">山东省</option>
                  <option value="河南省">河南省</option>
                  <option value="湖北省">湖北省</option>
                  <option value="湖南省">湖南省</option>
                  <option value="广东省">广东省</option>
                  <option value="广西省">广西省</option>
                  <option value="海南省">海南省</option>
                  <option value="重庆市">重庆市</option>
                  <option value="四川省">四川省</option>
                  <option value="贵州省">贵州省</option>
                  <option value="云南省">云南省</option>
                  <option value="西藏<">西藏</option>
                  <option value="陕西省">陕西省</option>
                  <option value="甘肃省">甘肃省</option>
                  <option value="青海省">青海省</option>
                  <option value="宁夏省">宁夏省</option>
                  <option value="新疆">新疆</option>
                  <option value="台湾">台湾</option>
                  <option value="香港">香港</option>
                  <option value="澳门">澳门</option>
                  <option value="海外">海外</option>
                </select>
              </div>
              <label class="layui-form-label">个人手机号</label>
              <div class="layui-input-inline">
                <input lay-verify="required|phone" type="text" name="phone" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>家庭住址</label>
              <div class="layui-input-inline">
                <input style="width: 500px" name="familyAddress" type="text" class="layui-input">
              </div>
              <label style="float: left;right: -310px;" class="layui-form-label">
                <span style="color: red">*</span>当前住址</label>
              <div class="layui-input-inline">
                <input style="position:absolute;right:-620px;width: 500px" name="currentAddress" type="text" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">电子邮箱</label>
              <div class="layui-input-inline">
                <input lay-verify="required|email" name="email" type="text" class="layui-input">
              </div>
              <label class="layui-form-label">毕业院校</label>
              <div class="layui-input-inline">
                <input  name="graduateSchool" type="text" class="layui-input">
              </div>
              <label class="layui-form-label">专业</label>
              <div class="layui-input-inline">
                <input  name="specialty" type="text" class="layui-input">
              </div>
              <label class="layui-form-label">毕业日期</label>
              <div class="layui-input-inline">
                <input type="text" id="graduationDate" name="graduationDate" placeholder="yyyy-mm-dd"
                       autocomplete="off" class="layui-input">
              </div>
            </div>
            <span style="color: #009688">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;入职信息</span>
            <hr class="layui-border-green">
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>入职日期</label>
              <div class="layui-input-inline">
                <input type="text" id="hiredate" name="hiredate" placeholder="yyyy-mm-dd" lay-verify="required|date"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label">转正日期</label>
              <div class="layui-input-inline">
                <input type="text" id="conversionTime" name="conversionTime" placeholder="yyyy-mm-dd"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label">离职日期</label>
              <div class="layui-input-inline">
                <input type="text" id="leaveTime" name="leaveTime" placeholder="yyyy-mm-dd"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label">人员分类</label>
              <div class="layui-input-inline">
                <select lay-verify="required" name="category">
                  <option selected value="在职人员">在职人员</option>
                  <option value="人才储备">人才储备</option>
                  <option value="离职人员">离职人员</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">所属部门</label>
              <div class="layui-input-inline">
                <select id="departmentFirstLevel" name="departmentFirstLevel" lay-filter="departmentFirstLevel">
                  <option value=""></option>
                </select>
              </div>
              <label class="layui-form-label">所属岗位</label>
              <div class="layui-input-inline">
                <select id="departmentSecondaryLevel" name="departmentSecondaryLevel" lay-filter="departmentSecondaryLevel">
                  <option value=""></option>
                </select>
              </div>
              <label class="layui-form-label">直接上级</label>
              <div class="layui-input-inline">
                <input type="text" name="directSuperior" autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label">银行账号</label>
              <div class="layui-input-inline">
                <input type="text" name="bankAccount" autocomplete="off" class="layui-input">
              </div>
            </div>
            <span style="color: #009688">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他信息</span>
            <hr class="layui-border-green">
            <div class="layui-form-item">
              <label class="layui-form-label">备注</label>
              <div class="layui-input-block">
                <textarea name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
              </div>
            </div>
<!--            <div class="layui-form-item">
              <label class="layui-form-label">照片</label>
              <div class="layui-upload">
                <div class="layui-upload-list">
                  <img class="layui-upload-img" id="headImg">
                </div>
                <div style="width: 95px;">
                  <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                  </div>
                </div>
              </div>
            </div>-->
            <div class="layui-form-item">
              <div style="float: right" class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">更新信息</button>
                <button type="button" class="layui-btn layui-btn-primary layui-bg-red" id="formDelete">删除员工</button>
              </div>
            </div>
          </form>
        </div>
      </fieldset>
  </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../js/userAuth.js"></script>
<!--初始化-->
<script>
  let user;
  $(function () {
    user = sessionStorage.getItem("user");   // 字符串
    user = JSON.parse(user);                  // 把一个json字符串转换成一个真正的json对象
  })
</script>
<script type="text/javascript">

  //日期选择器渲染
  layui.use('laydate', function(){
    var laydate = layui.laydate;
    //常规用法
    laydate.render({
      elem: '#birthday',
    });
    laydate.render({
      elem: '#graduationDate'
    });
    laydate.render({
      elem: '#hiredate'
    });
    laydate.render({
      elem: '#conversionTime'
    });
    laydate.render({
      elem: '#leaveTime'
    });
  });

  //我们引用的是layui.js而非layui.all.js,采用模块开发方式,所以需要用layui.use
  layui.use(['layer', 'form','miniTab'], function() {
    var form = layui.form;
    var miniTab = layui.miniTab;
    form.verify({
      username: function(value, item) { //value：表单的值、item：表单的DOM对象
        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
          return '用户名不能有特殊字符';
        }
        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
          return '用户名首尾不能出现下划线\'_\'';
        }
        if (/^\d+$/.test(value)) {
          return '用户名不能全为数字';
        }
      },
    });

    //当你需要使用ajax提交表单时,可监听表单提交
    //立即提交按钮要设置lay-submit属性,才能被监听
    //submit(formDemo) 表示只监听 含有lay-filter="formDemo" 的按钮
    form.on('submit(formDemo)', function(data) {
      //data.field 是一个json对象,批量获取表单的值{'表单的name':'对应的值'}
      data.field.staffDepartmentId = selectDepartmentId;
      data.field.staffJobId = selectJobId;
      data.field.staffId = rowData.staffId;
      console.log("部门id="+data.field.staffDepartmentId)
      console.log("岗位id="+data.field.staffJobId)
      $.ajax({
        url:'/staff/updateById',
        method:'post',
        contentType:"application/json;charset=utf-8",
        datatype:"text",
        data:JSON.stringify(data.field),
        success : function(response) {
          layer.msg(response.msg)
          setTimeout(function (){
            var index = parent.layer.getFrameIndex(window.name);
            parent.location.reload(); //刷新父页面
            parent.layer.close(index);//关闭当前页
          }, 800);
        },
        error : function(response) {
          layer.msg(response.msg)
        }
      })
      //return false 可以阻止 表单提交(刷新页面)
      return false;
    });
    //删除
    $("#formDelete").click(function() {
      console.log('id '+rowData.staffId);
      layer.confirm("确认要删除吗？", { title: "删除确认" },function(){
        $.ajax({
          url:'/staff/deleteById',
          method:'post',
          datatype:"text",
          data:{staffId:rowData.staffId},
          success : function(response) {
            layer.msg(response.msg)
          },
          error : function(response) {
            layer.msg(response.msg)
          }
        })
      });
    })
  })
</script>
<!--部门岗位联动选择-->
<script>
  layui.use(['layer', 'form'], function() {
    var form = layui.form;
    function initDepartmentFirstLevel(){
      $.ajax({
        url: "/department/selectAll",
        //data:{"searchParams":"","page2":"1","limit":"99"},
        success: function (responseData) {
          if (responseData.code === 200) {
            var length = responseData.data.length;
            //console.log("一级部门数量:"+length);
            //console.log("date:"+responseData.data);
            $("#departmentFirstLevel").empty();
            $("#departmentFirstLevel").append('<option selected value = "+'+rowData.department.departmentId+'+">'+rowData.department.departmentName+'</option>');
            $("#departmentSecondaryLevel").append('<option selected value = "+'+rowData.job.jobId+'+">'+rowData.job.jobName+'</option>');
            for(var i = 0; i < length; i++) {
              //添加option元素
              $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
            }
            //渲染select
            form.render('select');
          } else {
            layer.msg("加载列表失败");
          }
        }
      });
    }
    form.on('select(sex)',function(e) {
      var sex = $("select[name='sex']").val();
      var sex2 = e.value;
      console.log(sex2);
      form.render("select")
    })
    //直接初始化部门
    initDepartmentFirstLevel();
    // initDepartmentSecondaryLevel();
    function initDepartmentSecondaryLevel(departmentId){
      $.ajax({
        url: "/job/selectByDepartmentId?jobDepartmentId="+departmentId,
        //data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page2":"1","limit":"99"},
        success: function (responseData) {
          if (responseData.code === 200) {
            var length = responseData.data.length;
            console.log("二级部门数量:"+length);
            console.log("二级部门id:"+responseData.data[0].jobId);
            $("#departmentSecondaryLevel").empty();
            $("#departmentSecondaryLevel").append('<option value=""></option>');
            for(var i = 0; i < length; i++) {
              //添加option元素
              $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].jobId + "'>" + responseData.data[i].jobName + "</option>");
            }
            //渲染select
            form.render('select');
          } else {
            layer.msg("加载列表失败");
          }
        }
      });
    }
    form.on('select(departmentFirstLevel)', function(data){
      selectDepartmentId = data.value;
      console.log(selectDepartmentId);
      //根据一级部门联动二级部门
      initDepartmentSecondaryLevel(selectDepartmentId);
    });
    form.on('select(departmentSecondaryLevel)', function(data){
      selectJobId = data.value;
      console.log(selectJobId);
    });
  })
  var selectDepartmentId;
  var selectJobId;
</script>
<!--初始化填充数据-->
<script>
  let rowData = JSON.parse(sessionStorage.getItem("rowData"))
  console.log(rowData) //得到当前行数据
  $('input[name="staffName"]').val(rowData.staffName);
  $('input[name="sex"]').val(rowData.sex);
  $('input[name="birthday"]').val(rowData.birthday);
  $('input[name="idNumber"]').val(rowData.idNumber);
  $('select[name="politicsStatus"]').val(rowData.politicsStatus);
  $('select[name="marriage"]').val(rowData.marriage);
  $('select[name="nativePlace"]').val(rowData.nativePlace);
  $('input[name="phone"]').val(rowData.phone);
  $('input[name="familyAddress"]').val(rowData.familyAddress);
  $('input[name="currentAddress"]').val(rowData.currentAddress);
  $('input[name="email"]').val(rowData.email);
  $('input[name="graduateSchool"]').val(rowData.graduateSchool);
  $('input[name="specialty"]').val(rowData.specialty);
  $('input[name="graduationDate"]').val(rowData.graduationDate);
  $('input[name="hiredate"]').val(rowData.hiredate);
  $('input[name="conversionTime"]').val(rowData.conversionTime);
  $('input[name="leaveTime"]').val(rowData.leaveTime);
  $('select[name="category"]').val(rowData.category);
  $('select[name="departmentFirstLevel"]').val(rowData.department.departmentName);
  $('select[name="departmentSecondaryLevel"]').val(rowData.job.jobName);
  $('input[name="directSuperior"]').val(rowData.directSuperior);
  $('input[name="bankAccount"]').val(rowData.bankAccount);
  $('textarea[name="comment"]').val(rowData.comment);
  $("#headImg").attr("src", rowData.headImg);
  console.log('de:'+rowData.department.departmentName)
  console.log('de:'+rowData.job.jobName)
</script>
</body>
</html>